<template>
	<el-row class="lives-news">
		<el-row class="steps">
			<el-col class="row">
				<div class="row step-bar">
					<div class="step" v-bind:class="[{active: item.isActive},'step'+index]" v-for="(item, index) in stepObj" :key="index"></div>
					<!--<el-steps :active="active" finish-status="success" :align-center="true">-->
						<!--<el-step v-for="(step, index) in stepObj" :title="step.title" :status="step.status"  :key="index"></el-step>-->
					<!--</el-steps>-->
				</div>
				<!-- <el-button style="margin-top: 12px;" @click="next">下一步</el-button> -->
			</el-col>
		</el-row>
	</el-row>
</template>
<script>
export default {
	name: 'steps',
	data() {
		return {
		  	active: 0,
		  	stepObj: [{
		  		title: '门店信息',
				stepClass: 'step0',
		  		isActive: true
		  	},{
			    title: '资质信息',
			    stepClass: 'step1',
			    isActive: false
		    },{
			    title: '结算信息',
			    stepClass: 'step2',
			    isActive: false
		    }]
		};
	},
	created: function(){
		if(this.$route.query.step){
			this.active = this.$route.query.step;
			console.log(this.active);
			if(this.active == 1){
				this.stepObj[1]['isActive'] = true;
				this.stepObj[2]['isActive'] = false;
				this.stepObj[0]['isActive'] = true;
			}
			if(this.active == 2){
				this.stepObj[0]['isActive'] = true;
				this.stepObj[1]['isActive'] = true;
				this.stepObj[2]['isActive'] = true;
			}
		}
	},
	methods: {
		next: function() {
		  	if (this.active < this.stepObj.length) {
			    this.stepObj[this.active]['status'] = 'success'
			    this.active++
			    if(this.active < this.stepObj.length){
				    this.stepObj[this.active]['status'] = 'finish'
			    }
		  	}
		}
	}
}
</script>
<style scoped>
	.steps{
		width: 1100px;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 auto;
	}
	.step-bar{
		display: flex;
		flex-direction: row;
		align-items: center;
		overflow: hidden;
	}
	.step{
		width: 345px;
		height: 116px;
		display: inline-block;
		margin-right: 20px;
	}
	.step0.active {
		background: url("../../assets/images/step1.png") no-repeat center;
		background-size: cover;
	}
	.step1{
		background: url("../../assets/images/step2.png") no-repeat center;
		background-size: cover;
	}
	.step2{
		background: url("../../assets/images/step3.png") no-repeat center;
		background-size: cover;
	}
	.step1.active{
		 background: url("../../assets/images/step2-active.png") no-repeat center;
		 background-size: cover;
	}
	.step2.active{
		 background: url("../../assets/images/step3-active.png") no-repeat center;
		 background-size: cover;
	}

	.el-step__head.is-text.is-finish {
		background-color: #0bb745;
		border-color: #0bb745;
	}
	.el-step__title.is-finish {
	    color: #0bb745;
	}
	
</style>